<template>
  <div class="charts">
    <!-- Statisticalform -->
    <div class="box1">
      <div class="btnselect">
        <div class="selecttitle">往届党员工作占比</div>
        <div
          class="selectbox"
          @click="btn_echarts(title)"
          v-for="title in titledata"
          :key="title"
        >
          <h3 class="title">
            {{ title }}
          </h3>
        </div>
      </div>
        <Piecharts :piedata="finddata"/>
    </div>
    <div class="box2">
      <Linecharts  :sexlist="sexlist"/>
    </div>
  </div>
</template>

<script setup lang="ts">
const list = reactive({
  titledata: [],
  listdata: [],
  finddata:"",
  sexlist:"",
 
});
let { titledata, listdata, sexlist,finddata} = toRefs(list);
onMounted(() => {
  getdata();
 
});
const getdata = async () => {
 await axios.get("/datajson/index1.json").then((res) => {
    let {
      data: { title },
    } = res;
    list.titledata = title;
  });
  // 注意打包之前记得把public去掉 (好吧 其实加不加都没什么关系)
 await axios.get("/datajson/index1_1.json").then((res) => {
    let {
      data: { titledata },
    } = res;
    list.listdata = titledata;
    // console.log(res);
  });
 await axios.get("/datajson/index2.json").then((res) => {
    let {
      data: { sexdata },
    } = res;
    list.sexlist = sexdata;
    // console.log(sexdata);
  });
  btn_echarts("2022")
};

const btn_echarts = (data1: any) => {
  // console.log(data1);
  const selectdata = list.listdata.filter((data) => {
    return data.date.indexOf(data1.toString()) !== -1;
  });
  list.finddata = selectdata[0]
  // console.log(selectdata[0]);

};
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 90%;
  // background-color: aqua;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .box1 {
    width: 50%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    .btnselect {
      width: 150px;
      height: 100%;
      // background-color: aquamarine;
      display: flex;
      flex-direction: column;
      .selecttitle{
        font-weight: 900;
        font-size: 15px;
        align-items: center;
        justify-content: center;
      }
      // align-items: center;
      .selectbox {
        width: 100%;
        height: 40px;
        margin-top: 10px;
        background-color: aliceblue;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px rgb(0, 38, 255) solid;
        cursor: pointer;
        transition: 1s;
        .title {
          align-items: center;
          margin: 0 auto;
          font-size: 25px;
          font-family: "楷体";
          font-weight: 900;
        }
        
      }
      .selectbox:hover{
        background-color: aqua;
      }
      
      .chartsbox{
        width: 500px;
        height: 100%;
      }
    }
    // background-color: antiquewhite;
  }
  .box2 {
    width: 47%;
    height: 100%;
    // background-color: rgb(219, 129, 12);
  }
}
</style>
